<template>
  <div>
        <mu-container>
            <mu-tabs :value.sync="active" indicator-color="#ffffff" style="position:fixed;top:0px;">
                <mu-tab>商品</mu-tab>
                <mu-tab>评论</mu-tab>
                <mu-tab>详情</mu-tab>
            </mu-tabs>
            <div class="demo-text" v-if="active === 0" style="margin-top: 50px;margin-bottom:50px;">
                <div style="background: #f5f5f5">
                    <div style="padding:2.67vw 4vw;;background:#ffffff">
                        <mu-carousel interval='8000' :hideControls=true style="background:#ffffff;padding:0 4vw">    
                            <mu-carousel-item v-for="(carouselImg,index) in carouselImgs" :key="index">
                                <img :src="carouselImg">
                            </mu-carousel-item>
                        </mu-carousel>
                    </div>
                    <div style="background:#ffffff;padding:0 4vw">
                        <span style="color: #FF5230;font-size: 5.33vw">￥{{price.normalPrice}}</span>
                        <span style="text-decoration: line-through;display:inline-block;margin-left:20px">￥{{price.VIPPrice}}</span>
                    </div>
                    <div style="background:#ffffff">
                        <time-limit style="margin:10px 0"></time-limit>
                        <vip class="vip" :vipprice='price.VIPPrice' :cutPrice='price.normalPrice-price.VIPPrice' style="background:#333333;padding:0 4vw;h36px;width:92vw;height:36px;line-height:36px;margin:10px auto"></vip>                  
                    </div>
                    
                    <shop :shoptitle='shopTitle' :shopdescribe='shopDescribe' :shopserver='shopServer' class="shop" style="background:#ffffff;padding:0 4vw"></shop>
                    <Addresses :distribution='distribution' class="placeOrder" style="background:#ffffff;padding:0 4vw"></Addresses>
                    <comment style="background: #ffffff" :comment='comment' :applauseRate='applauseRate' class="comments"></comment>
                    <div class="chioceList">
                        <chioce v-for="(v,i) in chioces" :key='i' :chioce='v' ></chioce>
                    </div>
                    <shop-chart style="position:fixed;bottom:0px;background:#ffffff;width:100vw"></shop-chart>                    
                </div>                  
            </div>
            <div class="demo-text" v-if="active === 1">
                <comments :comments='comments' ></comments>
            </div>
            <div class="demo-text" v-if="active === 2">   
            </div>
        </mu-container>
  </div>
</template>
<script>
import Vip from '@/components/productdetail/VIP.vue';
import TimeLimit from "@/components/productdetail/timeLimit.vue";
import Shop from "@/components/productdetail/shop.vue";
import Addresses from "@/components/productdetail/address.vue";
import Comment from "@/components/productdetail/comment.vue";
import ShopChart from "@/components/common/shopCart.vue";
import Chioce from "@/components/common/chioce.vue";
import Comments from "@/components/productdetail/comments.vue";
export default {
    name:'productdetail',
    components:{
        'Vip':Vip,
        'Shop':Shop,
        'Addresses':Addresses,
        'Comment':Comment,
        'ShopChart':ShopChart,
        'Chioce':Chioce,
        'Comments':Comments,
        'TimeLimit':TimeLimit,
    },
    data () {
        return {
            carouselImgs:['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535630175003&di=9252eef025dbee2b70618dcf27bcca48&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a5d557f52cb1a84a0d304ff18182.jpg%401280w_1l_2o_100sh.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535630212010&di=0b7d530ecd63d20919fd8ed7ae549d57&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201510%2F24%2F20151024001812_j3S8P.jpeg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535630212093&di=57dc13501ef05510f4b5c113a7b7c569&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201508%2F26%2F20150826000451_JBnPs.thumb.700_0.jpeg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535630212092&di=558bb5e7ec77c0ac8545633aa8c80cd1&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201411%2F27%2F20141127150801_e8HFt.jpeg'],
            active: 0,
            price:{
                normalPrice:300,
                VIPPrice:270,
            },
            member:false,
            shopTitle:'红色连衣裙瘦身超级美，小仙女同款。超漂亮',
            shopDescribe:'红色连衣裙瘦身超级美，小仙女同款。超漂亮超漂亮超漂亮超漂亮超漂亮超漂亮超漂亮。',
            shopServer:['免运费','品质保证','72小时发货','7天无理由退换'],
            distribution:{
                start:'杭州',
                end:'杭州',
            },
            comment:[{id:'11',headImg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3939594644,1060201473&fm=27&gp=0.jpg',username:'大狗',content:'这件大衣很好看，穿在身上也是很好看。总而言之就是很好看,你说不好看也好看。',time:'2017-07-10',norms:'黑色L'},],
            comments:[
                {id:'11',headImg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3939594644,1060201473&fm=27&gp=0.jpg',username:'大狗',content:'这件大衣很好看，穿在身上也是很好看。总而言之就是很好看,你说不好看也好看。',time:'2017-07-10',norms:'黑色L'},
                {id:'11',headImg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3939594644,1060201473&fm=27&gp=0.jpg',username:'大狗',content:'这件大衣很好看，穿在身上也是很好看。总而言之就是很好看,你说不好看也好看。',time:'2017-07-10',norms:'黑色L'},
                {id:'11',headImg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3939594644,1060201473&fm=27&gp=0.jpg',username:'大狗',content:'这件大衣很好看，穿在身上也是很好看。总而言之就是很好看,你说不好看也好看。',time:'2017-07-10',norms:'黑色L'},
                {id:'11',headImg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3939594644,1060201473&fm=27&gp=0.jpg',username:'大狗',content:'这件大衣很好看，穿在身上也是很好看。总而言之就是很好看,你说不好看也好看。',time:'2017-07-10',norms:'黑色L'},
            ],
            applauseRate:'90%',
            chioces:[
                {img:'https://img14.360buyimg.com/n7/jfs/t5068/203/660818261/231865/9d2e2fd3/58e5b4c7N6ebc7f5c.jpg',title:'沙发',price:100,beforePrice:150,hot:500},
                {img:'https://img14.360buyimg.com/n7/jfs/t5068/203/660818261/231865/9d2e2fd3/58e5b4c7N6ebc7f5c.jpg',title:'沙发',price:100,beforePrice:150,hot:500},
                {img:'https://img14.360buyimg.com/n7/jfs/t5068/203/660818261/231865/9d2e2fd3/58e5b4c7N6ebc7f5c.jpg',title:'沙发',price:100,beforePrice:150,hot:500},
                {img:'https://img14.360buyimg.com/n7/jfs/t5068/203/660818261/231865/9d2e2fd3/58e5b4c7N6ebc7f5c.jpg',title:'沙发',price:100,beforePrice:150,hot:500}
            ]
        }
    },
    created() {
        // var dateEnd=new Date('2018-10-03 22:23:21');
        // var dateNow=new Date();
        // console.log(dateEnd.getTime()-dateNow.getTime());
        // var surplusTime= dateEnd.getTime()-dateNow.getTime();

    }
}
</script>
<style lang='scss'>
.container{
    padding:0px;
    .mu-tabs{
        background: #333333;
        display: flex;
        justify-content: space-around;
    }
}
  .mu-carousel{
      height: 109.6vw;
      width: 92vw;
      padding: 2.67vw;
      border-radius: 2.67vw;
          img{
            // height: 109.6vw;
            width: 92vw;
          }
  }
  .vip{
      margin: 0 auto;
      font-size: 12px;
      background: #333333;
      padding: 12px 20px 12px 10px;
  }
  .shop{
    margin: 0 auto;
  }
  .placeOrder{
      margin: 2.67vw 0;
  }
  .comments{
      padding: 0 4vw;
  }
  .chioceList{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        width: 92vw;
        margin:0 auto;
        >div {
            background:#ffffff;
            width: 48%;
            margin-bottom: 3.33vw;
            >img{
                width: 100%;
            }
        }
  }
</style>